<template>
  <div class="mod-brand">
    <data-table ref="dataTableRef" :criterias="criterias" name="brand" :initLoad="true" url="/product/brand/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <dt-search-item label="品牌名" prop="name">
          <el-input v-model="criterias.name.value" clearable placeholder="输入品牌名"></el-input>
        </dt-search-item>
        <dt-search-item label="显示状态" prop="visible">
          <el-select v-model="criterias.visible" clearable placeholder="显示状态">
            <el-option label="隐藏" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </dt-search-item>
      </template>
      <!-- ------------------------------------------ 工具栏 ------------------------------------------ -->
      <template v-slot:toolbar>
        <el-button-group>
          <el-button v-if="admin.isAuth('product:brand:save')" @click="() => addBrandEvent()" type="primary">
            新增
          </el-button>
          <el-button v-if="admin.isAuth('product:brand:save')" @click="() => updateBrandEvent()" type="warning">
            修改
          </el-button>
          <el-button v-if="admin.isAuth('product:brand:delete')" @click="() => deleteBrandEvent()" type="danger">
            删除
          </el-button>
        </el-button-group>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed prop="name" show-overflow-tooltip align="left" label="品牌名" width="160" />
      <el-table-column prop="logo" align="center" label="LOGO" width="100">
        <template #default="scope">
          <!-- TODO 遮盖罩不能居上 -->
          <el-image style="width: 40px; height: 40px" fit="fill" :src="scope.row.logo" :preview-src-list="[scope.row.logo]" close-on-press-escape hide-on-click-modal></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="visible" align="center" label="显示状态" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.visible === 0" type="danger">隐藏</el-tag>
          <el-tag v-else>显示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" align="center" label="排序" width="100" />
      <el-table-column prop="desct" show-overflow-tooltip align="left" label="介绍" />
      <el-table-column fixed="right" align="center" width="100" label="操作">
        <template #default="scope">
          <el-button v-if="admin.isAuth('product:brand:relation:list')" @click="brandCategoryRelationEvent(scope.row)">关联分类</el-button>
        </template>
      </el-table-column>
    </data-table>
    <!-- 弹窗, 新增 / 修改 -->
    <brand-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @loadBrandData="loadBrandData"></brand-add-or-update>
    <brand-category-relation v-if="brandCategoryRelationVisible" ref="brandCategoryRelationRef"></brand-category-relation>
  </div>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import { ref, nextTick, reactive } from "vue";

import BrandAddOrUpdate from "./brand-add-or-update.vue";
import BrandCategoryRelation from "./brand-category-relation.vue";

// 查询条件
const criterias = reactive({
  name: {
    type: "ll",
    value: "",
  },
  visible: undefined,
});

// 新增修改弹窗是否显示
const addOrUpdateVisible = ref(false);

// 分类关联窗口是否显示
const brandCategoryRelationVisible = ref(false);

// 弹窗引用
const addOrUpdateRef = ref();

// 数据表格引用
const dataTableRef = ref();

// 品牌目录关联窗口引用
const brandCategoryRelationRef = ref();

// 初始化品牌列表
const loadBrandData = () => {
  dataTableRef.value.loadTableData();
};

// 新增品牌
const addBrandEvent = async () => {
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("add");
};

// 修改品牌
const updateBrandEvent = async () => {
  let data = admin.obtainOneSelectionTableData(dataTableRef.value);
  if (!data) {
    return;
  }
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("update", data);
};

// 删除品牌
const deleteBrandEvent = () => {
  admin.batchDeleteSelectionTableData(dataTableRef.value, "/product/brand/delete");
};

// 打开品牌分类关联窗口
const brandCategoryRelationEvent = async (data) => {
  brandCategoryRelationVisible.value = true;
  await nextTick();
  brandCategoryRelationRef.value.initTable(data);
};
</script>
